<template>
    <view class="countBox" :class="{'dark':dark}">

        <view v-if="showTime">
            <text class="tag">{{endDateJson.h}}</text>:<text class="tag">{{endDateJson.m}}</text>:<text class="tag last">{{endDateJson.s}}</text>
        </view>

    </view>
</template>

<script>
import { CountTime } from '@/utils/tools'
export default {
    props: {
        endTime: String,
        size: String,
        dark: Boolean
    },
    components: {},
    data () {
        return {
            num: 0,
            endDateJson: {},
            timer: undefined,
            showTime:true
        }
    },
    watch: {
        endTime: {
            immediate: true,
            handler (current) {

                this.ountTimeFunc(current)
            }
        }
    },
    methods: {
        ountTimeFunc (endTime) {

            this.showTime = true

            if (!endTime) return


            this.endDateJson = CountTime(endTime)

            this.timer = setInterval(() => {

                let endDateJson = CountTime(endTime)

                if (!endDateJson) {
                    this.showTime = false
                    clearInterval(this.timer)
                }

                this.endDateJson = endDateJson

            }, 1000);


        },
    },
    beforeDestroy () {

        if( this.timer )
             clearInterval(this.timer)
    }

}
</script>

<style scoped lang="scss">
$mianColor: #eb4041;
.countBox {
    display: inline-block;
    .tag {
        vertical-align: text-bottom;
        border-radius: 40%;
        display: inline-block;
        width: 42rpx;
        height: 36rpx;
        text-align: center;
        line-height: 36rpx;
        background: #fff;
        font-size: 26rpx;
        margin: 0 6rpx;
        // font-weight: bold;
    }
    .last {
        color: $mianColor;
    }
    &.dark {
        .tag {
            color: #fff;
            background: #333;
        }
        .last {
            background: $mianColor;
        }
    }
   
}
</style>
